<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/css/paper-dashboard.css">
  <link rel="stylesheet" href="assets/demo/demo.css">
  <link rel="shortcut icon" href="assets/img/favicon.png">
  <title>Nucleo Outline Web Font</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>

<body class="demo-icons">
  <header>
    <h1>Paper Dashboard 2 Icons</h1>
    <p>Built with <a href="https://nucleoapp.com/?ref=1712">nucleoapp.com</a></p>
  </header>
  <div id="icons-wrapper">
    <section>
      <ul>
        <li>
          <i class="nc-icon nc-air-baloon"></i>
          <p>nc-air-baloon</p>
        </li>
        <li>
          <i class="nc-icon nc-album-2"></i>
          <p>nc-album-2</p>
        </li>
        <li>
          <i class="nc-icon nc-alert-circle-i"></i>
          <p>nc-alert-circle-i</p>
        </li>
        <li>
          <i class="nc-icon nc-align-center"></i>
          <p>nc-align-center</p>
        </li>
        <li>
          <i class="nc-icon nc-align-left-2"></i>
          <p>nc-align-left-2</p>
        </li>
        <li>
          <i class="nc-icon nc-ambulance"></i>
          <p>nc-ambulance</p>
        </li>
        <li>
          <i class="nc-icon nc-app"></i>
          <p>nc-app</p>
        </li>
        <li>
          <i class="nc-icon nc-atom"></i>
          <p>nc-atom</p>
        </li>
        <li>
          <i class="nc-icon nc-badge"></i>
          <p>nc-badge</p>
        </li>
        <li>
          <i class="nc-icon nc-bag-16"></i>
          <p>nc-bag-16</p>
        </li>
        <li>
          <i class="nc-icon nc-bank"></i>
          <p>nc-bank</p>
        </li>
        <li>
          <i class="nc-icon nc-basket"></i>
          <p>nc-basket</p>
        </li>
        <li>
          <i class="nc-icon nc-bell-55"></i>
          <p>nc-bell-55</p>
        </li>
        <li>
          <i class="nc-icon nc-bold"></i>
          <p>nc-bold</p>
        </li>
        <li>
          <i class="nc-icon nc-book-bookmark"></i>
          <p>nc-book-bookmark</p>
        </li>
        <li>
          <i class="nc-icon nc-bookmark-2"></i>
          <p>nc-bookmark-2</p>
        </li>
        <li>
          <i class="nc-icon nc-box-2"></i>
          <p>nc-box-2</p>
        </li>
        <li>
          <i class="nc-icon nc-box"></i>
          <p>nc-box</p>
        </li>
        <li>
          <i class="nc-icon nc-briefcase-24"></i>
          <p>nc-briefcase-24</p>
        </li>
        <li>
          <i class="nc-icon nc-bulb-63"></i>
          <p>nc-bulb-63</p>
        </li>
        <li>
          <i class="nc-icon nc-bullet-list-67"></i>
          <p>nc-bullet-list-67</p>
        </li>
        <li>
          <i class="nc-icon nc-bus-front-12"></i>
          <p>nc-bus-front-12</p>
        </li>
        <li>
          <i class="nc-icon nc-button-pause"></i>
          <p>nc-button-pause</p>
        </li>
        <li>
          <i class="nc-icon nc-button-play"></i>
          <p>nc-button-play</p>
        </li>
        <li>
          <i class="nc-icon nc-button-power"></i>
          <p>nc-button-power</p>
        </li>
        <li>
          <i class="nc-icon nc-calendar-60"></i>
          <p>nc-calendar-60</p>
        </li>
        <li>
          <i class="nc-icon nc-camera-compact"></i>
          <p>nc-camera-compact</p>
        </li>
        <li>
          <i class="nc-icon nc-caps-small"></i>
          <p>nc-caps-small</p>
        </li>
        <li>
          <i class="nc-icon nc-cart-simple"></i>
          <p>nc-cart-simple</p>
        </li>
        <li>
          <i class="nc-icon nc-chart-bar-32"></i>
          <p>nc-chart-bar-32</p>
        </li>
        <li>
          <i class="nc-icon nc-chart-pie-36"></i>
          <p>nc-chart-pie-36</p>
        </li>
        <li>
          <i class="nc-icon nc-chat-33"></i>
          <p>nc-chat-33</p>
        </li>
        <li>
          <i class="nc-icon nc-check-2"></i>
          <p>nc-check-2</p>
        </li>
        <li>
          <i class="nc-icon nc-circle-10"></i>
          <p>nc-circle-10</p>
        </li>
        <li>
          <i class="nc-icon nc-cloud-download-93"></i>
          <p>nc-cloud-download-93</p>
        </li>
        <li>
          <i class="nc-icon nc-cloud-upload-94"></i>
          <p>nc-cloud-upload-94</p>
        </li>
        <li>
          <i class="nc-icon nc-compass-05"></i>
          <p>nc-compass-05</p>
        </li>
        <li>
          <i class="nc-icon nc-controller-modern"></i>
          <p>nc-controller-modern</p>
        </li>
        <li>
          <i class="nc-icon nc-credit-card"></i>
          <p>nc-credit-card</p>
        </li>
        <li>
          <i class="nc-icon nc-delivery-fast"></i>
          <p>nc-delivery-fast</p>
        </li>
        <li>
          <i class="nc-icon nc-diamond"></i>
          <p>nc-diamond</p>
        </li>
        <li>
          <i class="nc-icon nc-email-85"></i>
          <p>nc-email-85</p>
        </li>
        <li>
          <i class="nc-icon nc-favourite-28"></i>
          <p>nc-favourite-28</p>
        </li>
        <li>
          <i class="nc-icon nc-glasses-2"></i>
          <p>nc-glasses-2</p>
        </li>
        <li>
          <i class="nc-icon nc-globe-2"></i>
          <p>nc-globe-2</p>
        </li>
        <li>
          <i class="nc-icon nc-globe"></i>
          <p>nc-globe</p>
        </li>
        <li>
          <i class="nc-icon nc-hat-3"></i>
          <p>nc-hat-3</p>
        </li>
        <li>
          <i class="nc-icon nc-headphones"></i>
          <p>nc-headphones</p>
        </li>
        <li>
          <i class="nc-icon nc-html5"></i>
          <p>nc-html5</p>
        </li>
        <li>
          <i class="nc-icon nc-image"></i>
          <p>nc-image</p>
        </li>
        <li>
          <i class="nc-icon nc-istanbul"></i>
          <p>nc-istanbul</p>
        </li>
        <li>
          <i class="nc-icon nc-key-25"></i>
          <p>nc-key-25</p>
        </li>
        <li>
          <i class="nc-icon nc-laptop"></i>
          <p>nc-laptop</p>
        </li>
        <li>
          <i class="nc-icon nc-layout-11"></i>
          <p>nc-layout-11</p>
        </li>
        <li>
          <i class="nc-icon nc-lock-circle-open"></i>
          <p>nc-lock-circle-open</p>
        </li>
        <li>
          <i class="nc-icon nc-map-big"></i>
          <p>nc-map-big</p>
        </li>
        <li>
          <i class="nc-icon nc-minimal-down"></i>
          <p>nc-minimal-down</p>
        </li>
        <li>
          <i class="nc-icon nc-minimal-left"></i>
          <p>nc-minimal-left</p>
        </li>
        <li>
          <i class="nc-icon nc-minimal-right"></i>
          <p>nc-minimal-right</p>
        </li>
        <li>
          <i class="nc-icon nc-minimal-up"></i>
          <p>nc-minimal-up</p>
        </li>
        <li>
          <i class="nc-icon nc-mobile"></i>
          <p>nc-mobile</p>
        </li>
        <li>
          <i class="nc-icon nc-money-coins"></i>
          <p>nc-money-coins</p>
        </li>
        <li>
          <i class="nc-icon nc-note-03"></i>
          <p>nc-note-03</p>
        </li>
        <li>
          <i class="nc-icon nc-palette"></i>
          <p>nc-palette</p>
        </li>
        <li>
          <i class="nc-icon nc-paper"></i>
          <p>nc-paper</p>
        </li>
        <li>
          <i class="nc-icon nc-pin-3"></i>
          <p>nc-pin-3</p>
        </li>
        <li>
          <i class="nc-icon nc-planet"></i>
          <p>nc-planet</p>
        </li>
        <li>
          <i class="nc-icon nc-refresh-69"></i>
          <p>nc-refresh-69</p>
        </li>
        <li>
          <i class="nc-icon nc-ruler-pencil"></i>
          <p>nc-ruler-pencil</p>
        </li>
        <li>
          <i class="nc-icon nc-satisfied"></i>
          <p>nc-satisfied</p>
        </li>
        <li>
          <i class="nc-icon nc-scissors"></i>
          <p>nc-scissors</p>
        </li>
        <li>
          <i class="nc-icon nc-send"></i>
          <p>nc-send</p>
        </li>
        <li>
          <i class="nc-icon nc-settings-gear-65"></i>
          <p>nc-settings-gear-65</p>
        </li>
        <li>
          <i class="nc-icon nc-settings"></i>
          <p>nc-settings</p>
        </li>
        <li>
          <i class="nc-icon nc-share-66"></i>
          <p>nc-share-66</p>
        </li>
        <li>
          <i class="nc-icon nc-shop"></i>
          <p>nc-shop</p>
        </li>
        <li>
          <i class="nc-icon nc-simple-add"></i>
          <p>nc-simple-add</p>
        </li>
        <li>
          <i class="nc-icon nc-simple-delete"></i>
          <p>nc-simple-delete</p>
        </li>
        <li>
          <i class="nc-icon nc-simple-remove"></i>
          <p>nc-simple-remove</p>
        </li>
        <li>
          <i class="nc-icon nc-single-02"></i>
          <p>nc-single-02</p>
        </li>
        <li>
          <i class="nc-icon nc-single-copy-04"></i>
          <p>nc-single-copy-04</p>
        </li>
        <li>
          <i class="nc-icon nc-sound-wave"></i>
          <p>nc-sound-wave</p>
        </li>
        <li>
          <i class="nc-icon nc-spaceship"></i>
          <p>nc-spaceship</p>
        </li>
        <li>
          <i class="nc-icon nc-sun-fog-29"></i>
          <p>nc-sun-fog-29</p>
        </li>
        <li>
          <i class="nc-icon nc-support-17"></i>
          <p>nc-support-17</p>
        </li>
        <li>
          <i class="nc-icon nc-tablet-2"></i>
          <p>nc-tablet-2</p>
        </li>
        <li>
          <i class="nc-icon nc-tag-content"></i>
          <p>nc-tag-content</p>
        </li>
        <li>
          <i class="nc-icon nc-tap-01"></i>
          <p>nc-tap-01</p>
        </li>
        <li>
          <i class="nc-icon nc-tie-bow"></i>
          <p>nc-tie-bow</p>
        </li>
        <li>
          <i class="nc-icon nc-tile-56"></i>
          <p>nc-tile-56</p>
        </li>
        <li>
          <i class="nc-icon nc-time-alarm"></i>
          <p>nc-time-alarm</p>
        </li>
        <li>
          <i class="nc-icon nc-touch-id"></i>
          <p>nc-touch-id</p>
        </li>
        <li>
          <i class="nc-icon nc-trophy"></i>
          <p>nc-trophy</p>
        </li>
        <li>
          <i class="nc-icon nc-tv-2"></i>
          <p>nc-tv-2</p>
        </li>
        <li>
          <i class="nc-icon nc-umbrella-13"></i>
          <p>nc-umbrella-13</p>
        </li>
        <li>
          <i class="nc-icon nc-user-run"></i>
          <p>nc-user-run</p>
        </li>
        <li>
          <i class="nc-icon nc-vector"></i>
          <p>nc-vector</p>
        </li>
        <li>
          <i class="nc-icon nc-watch-time"></i>
          <p>nc-watch-time</p>
        </li>
        <li>
          <i class="nc-icon nc-world-2"></i>
          <p>nc-world-2</p>
        </li>
        <li>
          <i class="nc-icon nc-zoom-split"></i>
          <p>nc-zoom-split</p>
        </li>
        <!-- list of icons here with the proper class-->
      </ul>
    </section>
  </div>
  <script>
    function SelectText(element) {
      var doc = document,
        text = element,
        range, selection;
      if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
    window.onload = function() {
      var iconsWrapper = document.getElementById('icons-wrapper'),
        listItems = iconsWrapper.getElementsByTagName('li');
      for (var i = 0; i < listItems.length; i++) {
        listItems[i].onclick = function fun(event) {
          var selectedTagName = event.target.tagName.toLowerCase();
          if (selectedTagName == 'p' || selectedTagName == 'em') {
            SelectText(event.target);
          } else if (selectedTagName == 'input') {
            event.target.setSelectionRange(0, event.target.value.length);
          }
        }

        var beforeContentChar = window.getComputedStyle(listItems[i].getElementsByTagName('i')[0], '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, ""),
          beforeContent = beforeContentChar.charCodeAt(0).toString(16);
        var beforeContentElement = document.createElement("em");
        beforeContentElement.textContent = "\\" + beforeContent;
        listItems[i].appendChild(beforeContentElement);

        //create input element to copy/paste chart
        var charCharac = document.createElement('input');
        charCharac.setAttribute('type', 'text');
        charCharac.setAttribute('maxlength', '1');
        charCharac.setAttribute('readonly', 'true');
        charCharac.setAttribute('value', beforeContentChar);
        listItems[i].appendChild(charCharac);
      }
    }
  </script>
</body>

</html>
